<%@ page import="java.net.URLEncoder" %>
<%@ page import="com.alibaba.fastjson.JSON" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2020/8/16
  Time: 16:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String rangeString = request.getHeader("Range");//如果是video标签发起的请求就不会为null
    String contextPath = request.getServletContext().getContextPath();//获取项目名
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>播放</title>
    <title>i学习</title>
    <link rel="stylesheet" href="<%=contextPath%>/static/css/base.css">
    <link rel="stylesheet" href="<%=contextPath%>/static/css/index.css">
    <link rel="stylesheet" href="<%=contextPath%>/static/css/home.css">
    <link rel="stylesheet" href="<%=contextPath%>/static/css/font/iconfont.css">
    <link rel="stylesheet" href="<%=contextPath%>/static/layui/css/layui.css">
    <script src="<%=contextPath%>/static/layui/layui.js"></script>
    <script src="<%=contextPath%>/static/js/message.js"></script>
    <script src="<%=contextPath%>/static/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="<%=contextPath%>/static/css/Displayer.css">
    <script src="<%=contextPath%>/static/js/head.js"></script>
    <script>
        var jsp_Data = <%=JSON.toJSONString(request.getAttribute("page"))%>;
    </script>
</head>
<body>
<div id="vue_body" style="background-color: white">
    <!-- 顶部   -->
    <div class="header">
        <div class="width_1200 clearfix">
            <div class="header_right right_f">
                你好
                <div class="item uname" v-if="user"><c:if test="${sessionScope.user==null}"><a href="login.jsp">请登录</a></c:if>
                    <c:if test="${sessionScope.user!=null}"><a href="homePage.jsp">,${sessionScope.user.userName}!</a></c:if></div>
                <div class="item">欢迎来到i学习！</div>
                <div class="item login" ></div>
                <div class="item login"></div>
                <div class="item" ><a href="registration.jsp">[注册]</a></div>
                <div class="item" onclick="exitLogin()">退出</div>
                <div class="item service">客服中心</div>
            </div>

        </div>
    </div>

<!-- 内容   -->
<div class="logobox width_1200" style="background-color: white">
    <div class="logo left_f">
        <a href="<%=contextPath%>/index?action=getshowlist"><img src="<%=contextPath%>/static/img/logo.jpeg" width="60" height="120"></a>
    </div>
    <div class="searchbox left_f">
        <div class="input clearfix">
            <form action="<%=contextPath%>/index?action=getlistbyname" method="post">
                <input type="text"   name="videoname" placeholder="请输入关键词">
                <span><input style="margin-left: 66px; text-index:0px;width: 130px;font-size: 22px;border:#000000 2px solid" type="submit" value="站内搜索"></span>
            </form>
        </div>

    </div>

    <a class="myclass left_f" rel="nofollow"
       href="<%=contextPath%>/uploadServlet?action=going"> <span class="icons"></span>我要上传</a>
</div>
<hr style="width:100%;height:5px;margin-bottom: 3px">

</div>
<!-- 视频播放主体-->
<div class="body">

    <div>
        <!-- 播放器-->
        <video id="vdPlay" class="video" src="<%=contextPath%>/static/${video.videoAddress}"  autoplay="autoplay"
               type="video/mp4"
               width="600" height="390" preload controls>
        </video>

        <!-- 播放列表-->
        <div style="overflow:scroll;" id="listDiv" class="listDiv">
            <form>
                <ul id="listUl"style="font-size:20px;" class="listUl">
                    <c:forEach items="${requestScope.videos}" var="vd">
                        <li class="play">
                            <span style="display: none;">${vd.videoAddress}</span>
                            <span style="display: none;">${vd.videoConsume}</span>
                                ${vd.videoName}
                        </li>
                    </c:forEach>
                </ul>
            </form>
        </div>
    </div>

</div>
<script>
    //点击播放进行扣费
    $(".play").click(function () {

        var vc=$($(this).children("span").get(1)).text();
        var videoPath = "/" + $($(this).children("span").get(0)).text();
        console.log(videoPath);
        confirm('播放视频会进行相应扣费').then(()=>{
            //确定是进行的操作
            $.ajax({
                url: "<%=contextPath%>/dispaly.php",
                data: {
                    action: "userDeduction",
                    userId: "1",
                    videoConsume: vc
                },
                dataType: 'json',
                success: function (date) {
                    if (date.deduction) {
                        alert("扣费成功");
                        $("#vdPlay").attr({
                            src: videoPath,
                            autoplay: "autoplay"
                        });

                    } else {
                        alert("钱不够");

                    }
                }, error: function () {
                    console.log("ajax异常");
                }
            });


        }).catch(()=>{
                //取消时进行的操作
            }
        )
    });
</script>
<br>

<!-- 广告图片-->
<br>

<!-- 评论 -->
<div id="forum">
    <!-- 全部评论数-->
    <div style="font-family: Arial;margin-bottom: 2em"><span
            style="font-style: oblique; font-size: 2em; color: #2d2d2d">全部评论 </span> (${page.count});
    </div>

    <c:forEach items="${commentsPage}" var="com">
        <!-- 评论主体-->
        <div class="ztdpl">
            <!-- 头像 -->
            <img class="Avatar" style="" src="<%=contextPath%>/static/img/user.jpg">
            <!-- 姓名-->
           ${com.commentUserName}
                <!-- 点赞小红心-->
                <i id="dz" class="layui-icon layui-icon-heart" style="color: red;"></i>
                <script>
                    //小红心事件
                    $(".layui-icon-heart").click(function () {
                        $(this).removeClass("layui-icon-heart").addClass("layui-icon-heart-fill");
                    });
                </script>

            <!-- 发布时间-->
          发布于 | <span style="font-weight: bolder">${com.commentDataTime}</span>

            <!-- 评论内容-->
           <br><span style="top: -50px;display: inline-block;width: 2em;"></span>${com.commentContent}
        </div>
        <hr/>
    </c:forEach>
    <div class="pages" style="float: right;padding:0;text-align: right;margin-top: 0; margin-right: 10%;background-color: white">
        <c:choose>
            <c:when test="${page.pageCount <= 5}">
                <c:set var="begin" value="1"/>
                <c:set var="end" value="${page.pageCount}"/>
            </c:when>
            <%--页数超过了6页--%>
            <c:otherwise>
                <c:set var="begin" value="${page.pageNo-1}"/>
                <c:set var="end" value="${page.pageNo+2}"/>
                <%--如果begin减1后为0,设置起始页为1,最大页为6--%>
                <c:if test="${begin -1 <= 0}">
                    <c:set var="begin" value="1"/>
                    <c:set var="end" value="4"/>
                </c:if>
                <%--如果end超过最大页,设置起始页=最大页-5--%>
                <c:if test="${end > page.pageCount}">
                    <c:set var="begin" value="${page.pageCount - 3}"/>
                    <c:set var="end" value="${page.pageCount}"/>
                </c:if>
            </c:otherwise>
        </c:choose>
        <input type="button" style="margin-left: 8px;font-size: 26px"onclick="fanye(1)"   class="p_pre" value="首页">
        <c:if test="${page.pageNo>1}">
            <input type="button" style="margin-left: 8px;font-size: 26px" onclick="fanye(${page.pageNo-1})" class="p_pre" value="上一页">
        </c:if>
        <c:forEach var="i" begin="${begin}" end="${end}">
            <%--当前页,选中--%>
            <input type="button" style="margin-left: 8px;font-size: 26px" onclick="fanye(${i})"
                   <c:if test="${(page.pageNo)==i}">
                        style="background-color:antiquewhite"
                   </c:if> value="${i}">
        </c:forEach>
        <c:if test="${page.pageNo<page.pageCount}">
            <input type="button" onclick="fanye(${page.pageNo+1})" style="font-size: 26px;" class="p_pre" value="下一页">
        </c:if>
        <input type="bytton" style="margin-left: 8px;font-size: 26px" onclick="fanye(${page.pageCount})" class="p_pre" value="尾页">

</div>
<br>
<br>
<br>
</div>

<!-- 发表评论-->
<div class="postComment">
    <p style="margin:10px 10%;font-family:fantasy;font-size: 1.3em; font-style: revert">想说就说|请发表你的评论 0.0</p>

    <form>
        <!-- 输入框-->
        <input class="postText" type="text" name="comment" id="comment">
        <!-- 发表按钮-->
        <span class="publish" ><input type="button" value="发表" onclick="addcom11()"></span>
    </form>
</div>
</div>
    <hr/>
    <jsp:include page="include/foot.jsp"></jsp:include>

</body>
<script type="text/javascript">
    function addcom11() {
        var comment=$("#comment").val();
        var userid=${sessionScope.user.userId}
        var videoId=${video.videoId}
            $.ajax({
                type:"post",
                data:{
                    commentContent:comment,
                    userid:userid,
                    videoId:videoId,
                },
                datatype:"json" ,
                url:"/Comment?action=insertComment",
                async:true,
                success:function(result){
                    var retu = eval("(" + result + ")");
                    alert(retu.message);
                    fanye(jsp_Data.pageNo);
                    let dataView = $("#comment");
                    dataView.val("");
                }});
    }
</script>
<script type="text/javascript">
    function fanye(num) {
        var videoid=${video.videoId}
            $.ajax({
                type:"post",
                data:{
                    currentPage:num,
                    videoId:videoid
                },
                datatype:"json" ,
                url:"/Comment?action=fanyeComment",
                async:true,
                success:function(result){
                    jsp_Data.pageNo = num;
                    result = eval("" + result + "");
                    let dataView = $("#forum");
                    let dataHtml = "<!-- 全部评论数-->\n" +
                        "    <div style=\"font-family: Arial;margin-bottom: 2em\"><span\n" +
                        "            style=\"font-style: oblique; font-size: 2em; color: #2d2d2d\">全部评论 </span> ("+jsp_Data.count+");\n" +
                        "    </div>";
                    for(let data in result){
                        data = result[data];
                        dataHtml += "<!-- 评论主体-->";
                        dataHtml += "        <div class=\"ztdpl\">";
                        dataHtml += "<!-- 头像 -->\n" +
                            "            <img class=\"Avatar\" style=\"\" src=\"<%=contextPath%>/static/img/user.jpg\">";
                        dataHtml += "<!-- 姓名-->\n" +
                            "           "+(typeof(data.commentUserName) == "undefined"? "用户已被删除": data.commentUserName)+"";
                        dataHtml += "<!-- 点赞小红心-->\n" +
                            "                <i id=\"dz\" class=\"layui-icon layui-icon-heart\" style=\"color: red;\"></i>";
                        dataHtml += "<script>\n" +
                            "                    //小红心事件\n" +
                            "                    $(\".layui-icon-heart\").click(function () {\n" +
                            "                        $(this).removeClass(\"layui-icon-heart\").addClass(\"layui-icon-heart-fill\");\n" +
                            "                    });\n" +
                            "                <\/script>";
                        dataHtml += "<!-- 发布时间-->\n" +
                            "          发布于 | <span style=\"font-weight: bolder\">"+data.commentDataTime+"</span>";
                        dataHtml += "<!-- 评论内容-->\n" +
                            "           <br><span style=\"top: -50px;display: inline-block;width: 2em;\"></span>"+data.commentContent+"\n" +
                            "        </div>\n" +
                            "        <hr/>";
                    }
                    dataHtml += "    <div class=\"pages\" style=\"float: right;padding:0;text-align: right;margin-top: 0; margin-right: 10%;background-color: white\">\n";
                    let begin = 1;
                    let end = 1;
                    if(jsp_Data.pageCount <= 5){
                        end = jsp_Data.pageCount;
                    }else{
                        begin = jsp_Data.pageNo - 1;
                        end = jsp_Data.pageNo + 2;
                        if(begin - 1 <= 0){
                            begin = 1;
                            end = 4;
                        }
                        if(end > jsp_Data.pageCount){
                            begin = jsp_Data.pageNo - 3;
                            end = jsp_Data.pageCount;
                        }
                    }
                    dataHtml += "<input type=\"button\" style=\"margin-left: 8px;font-size: 26px\"onclick=\"fanye(1)\"   class=\"p_pre\" value=\"首页\">";
                    if(jsp_Data.pageNo > 1){
                        dataHtml += "            <input type=\"button\" style=\"margin-left: 8px;font-size: 26px\" onclick=\"fanye("+(jsp_Data.pageNo - 1)+")\" class=\"p_pre\" value=\"上一页\">\n";
                    }
                    for (let i = begin;i <= end; i++){
                        dataHtml += "<input type=\"button\" style=\"margin-left: 8px;font-size: 26px\" onclick=\"fanye("+i+")\" ";
                        if(jsp_Data.pageNo == i){
                            dataHtml += "style=\"background-color:antiquewhite\" ";
                        }
                        dataHtml += " value=\""+i+"\">";
                    }
                    if(jsp_Data.pageNo < jsp_Data.pageCount){
                        dataHtml += "            <input type=\"button\" onclick=\"fanye("+(jsp_Data.pageNo + 1)+")\" style=\"font-size: 26px;\" class=\"p_pre\" value=\"下一页\">";
                    }
                    dataHtml += "        <input type=\"bytton\" style=\"margin-left: 8px;font-size: 26px\" onclick=\"fanye("+jsp_Data.pageCount+")\" class=\"p_pre\" value=\"尾页\">\n</div>\n" +
                        "<br>\n" +
                        "<br>\n" +
                        "<br>";
                    dataView.html(dataHtml);
                }});
    }
</script>
<script>
    //初始化函数
    $(function () {
        //点击替换标签
        $("#tst").click(function () {

            $($(".ztdpl").get(0)).replaceWith('<div class="ztdpl">\n' +
                '            <!-- 头像 -->\n' +
                '            <img class="Avatar" style=" left: -50px;" src="<%=contextPath%>/img/学习路线图.png">\n' +
                '            <!-- 姓名-->\n' +
                '            <div class="sytName">name${com.userName}\n' +
                '                <!-- 点赞小红心-->\n' +
                '                <i id="dz" class="layui-icon layui-icon-heart" style="color: red;"></i>\n' +
                '            </div>\n' +
                '            <!-- 发布时间-->\n' +
                '            <div class="styDate" style="">发布于 | <span style="font-weight: bolder">202020202${com.commentDataTime}</span>\n' +
                '            </div>\n' +
                '            <!-- 评论内容-->\n' +
                '            <div><br><span style="display: inline-block;width: 2em;"></span>0.0.0.0.0.0.0.0.0${com.commentContent}\n' +
                '            </div>\n' +
                '            <br/>\n' +
                '            <hr/>\n' +
                '            <br/>\n' +
                '            <br/>\n' +
                '        </div>');
            //重新绑定小红心事件（因为替换后的标签并未被之前的小红心事件获取到)
            $(".layui-icon-heart").click(function () {

                $(this).removeClass("layui-icon-heart").addClass("layui-icon-heart-fill");


            });
        });

    });
</script>




</html>
